<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-graphs and Equality Saturation Quiz</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .quiz-container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        h1 {
            text-align: center;
            color: #4a5568;
            margin-bottom: 30px;
            font-size: 2.2em;
        }

        .question {
            background: #f8fafc;
            border-left: 4px solid #667eea;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            display: none;
        }

        .question.active {
            display: block;
            animation: slideIn 0.3s ease-in-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .question h3 {
            color: #2d3748;
            margin-bottom: 15px;
        }

        .options {
            margin: 15px 0;
        }

        .option {
            display: block;
            margin: 10px 0;
            padding: 12px;
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .option:hover {
            border-color: #667eea;
            background: #f7fafc;
        }

        .option input {
            margin-right: 10px;
        }

        .text-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            margin: 10px 0;
        }

        .text-input:focus {
            outline: none;
            border-color: #667eea;
        }

        .buttons {
            text-align: center;
            margin: 20px 0;
        }

        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 10px;
            transition: background 0.2s;
        }

        button:hover {
            background: #5a67d8;
        }

        button:disabled {
            background: #a0aec0;
            cursor: not-allowed;
        }

        .feedback {
            margin: 15px 0;
            padding: 15px;
            border-radius: 8px;
            display: none;
        }

        .feedback.correct {
            background: #c6f6d5;
            border: 2px solid #38a169;
            color: #22543d;
        }

        .feedback.incorrect {
            background: #fed7d7;
            border: 2px solid #e53e3e;
            color: #742a2a;
        }

        .progress {
            width: 100%;
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            margin: 20px 0;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            width: 0%;
            transition: width 0.3s ease;
        }

        .score {
            text-align: center;
            font-size: 1.2em;
            margin: 20px 0;
            color: #4a5568;
        }

        .final-score {
            background: #667eea;
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            display: none;
        }

        .final-score h2 {
            margin-bottom: 20px;
            font-size: 2em;
        }
    </style>
</head>

<body>
    <div class="quiz-container">
        <h1>🧠 E-graphs & Equality Saturation Quiz</h1>

        <div class="progress">
            <div class="progress-bar" id="progressBar"></div>
        </div>

        <div class="score" id="scoreDisplay">Question 1 of 8</div>

        <!-- Question 1 -->
        <div class="question active" id="q1">
            <h3>1. What is the main problem with traditional term rewriting?</h3>
            <div class="options">
                <label class="option">
                    <input type="radio" name="q1" value="a">
                    It's too slow to compute
                </label>
                <label class="option">
                    <input type="radio" name="q1" value="b">
                    It's destructive and forces you to commit to one path
                </label>
                <label class="option">
                    <input type="radio" name="q1" value="c">
                    It only works with mathematical expressions
                </label>
                <label class="option">
                    <input type="radio" name="q1" value="d">
                    It requires too much memory
                </label>
            </div>
            <div class="feedback" id="f1"></div>
        </div>

        <!-- Question 2 -->
        <div class="question" id="q2">
            <h3>2. What are the three main components of an e-graph?</h3>
            <div class="options">
                <label class="option">
                    <input type="radio" name="q2" value="a">
                    Nodes, edges, and values
                </label>
                <label class="option">
                    <input type="radio" name="q2" value="b">
                    E-classes, e-nodes, and operators
                </label>
                <label class="option">
                    <input type="radio" name="q2" value="c">
                    Terms, expressions, and programs
                </label>
                <label class="option">
                    <input type="radio" name="q2" value="d">
                    Patterns, substitutions, and rewrites
                </label>
            </div>
            <div class="feedback" id="f2"></div>
        </div>

        <!-- Question 3 -->
        <div class="question" id="q3">
            <h3>3. In the example (a × 2) / 2, what is the "wrong turn" that a greedy optimizer might take?</h3>
            <input type="text" class="text-input" id="q3-input" placeholder="Enter your answer...">
            <div class="feedback" id="f3"></div>
        </div>

        <!-- Question 4 -->
        <div class="question" id="q4">
            <h3>4. What makes e-graphs so space-efficient?</h3>
            <div class="options">
                <label class="option">
                    <input type="radio" name="q4" value="a">
                    They compress data using algorithms
                </label>
                <label class="option">
                    <input type="radio" name="q4" value="b">
                    They store structurally similar expressions compactly
                </label>
                <label class="option">
                    <input type="radio" name="q4" value="c">
                    They delete old expressions when adding new ones
                </label>
                <label class="option">
                    <input type="radio" name="q4" value="d">
                    They only store the most important expressions
                </label>
            </div>
            <div class="feedback" id="f4"></div>
        </div>

        <!-- Question 5 -->
        <div class="question" id="q5">
            <h3>5. What are the two core operations that modify an e-graph?</h3>
            <div class="options">
                <label class="option">
                    <input type="radio" name="q5" value="a">
                    search and replace
                </label>
                <label class="option">
                    <input type="radio" name="q5" value="b">
                    add and union
                </label>
                <label class="option">
                    <input type="radio" name="q5" value="c">
                    match and substitute
                </label>
                <label class="option">
                    <input type="radio" name="q5" value="d">
                    create and delete
                </label>
            </div>
            <div class="feedback" id="f5"></div>
        </div>

        <!-- Question 6 -->
        <div class="question" id="q6">
            <h3>6. True or False: E-graph rewriting is destructive like traditional term rewriting.</h3>
            <div class="options">
                <label class="option">
                    <input type="radio" name="q6" value="true">
                    True
                </label>
                <label class="option">
                    <input type="radio" name="q6" value="false">
                    False
                </label>
            </div>
            <div class="feedback" id="f6"></div>
        </div>

        <!-- Question 7 -->
        <div class="question" id="q7">
            <h3>7. What does it mean when an e-graph contains a cycle?</h3>
            <input type="text" class="text-input" id="q7-input" placeholder="Explain what cycles represent...">
            <div class="feedback" id="f7"></div>
        </div>

        <!-- Question 8 -->
        <div class="question" id="q8">
            <h3>8. In the rewrite process l → r, what do you get when you search for pattern l in the e-graph?</h3>
            <div class="options">
                <label class="option">
                    <input type="radio" name="q8" value="a">
                    A list of matching terms
                </label>
                <label class="option">
                    <input type="radio" name="q8" value="b">
                    Pairs of (c, σ) where c is the matching e-class and σ is the substitution
                </label>
                <label class="option">
                    <input type="radio" name="q8" value="c">
                    The right-hand side pattern r
                </label>
                <label class="option">
                    <input type="radio" name="q8" value="d">
                    A new e-node to add to the graph
                </label>
            </div>
            <div class="feedback" id="f8"></div>
        </div>

        <div class="buttons">
            <button onclick="previousQuestion()" id="prevBtn" disabled>Previous</button>
            <button onclick="checkAnswer()" id="checkBtn">Check Answer</button>
            <button onclick="nextQuestion()" id="nextBtn" disabled>Next</button>
        </div>

        <div class="final-score" id="finalScore">
            <h2>🎉 Quiz Complete!</h2>
            <p id="finalScoreText"></p>
            <button onclick="restartQuiz()">Restart Quiz</button>
        </div>
    </div>

    <script>
        let currentQuestion = 1;
        let score = 0;
        let answered = false;
        const totalQuestions = 8;

        const answers = {
            1: 'b',
            2: 'b',
            3: 'rewrite a * 2 to a << 1',
            4: 'b',
            5: 'b',
            6: 'false',
            7: 'infinite set of terms',
            8: 'b'
        };

        const explanations = {
            1: "Correct! Traditional term rewriting is destructive - once you apply a rewrite, the original term is lost, forcing you to commit to one path.",
            2: "Correct! An e-graph consists of e-classes (equivalence classes), e-nodes (operators with e-class children), and they work together to represent expressions.",
            3: "Correct! The greedy optimizer would rewrite a * 2 to a << 1, getting (a << 1) / 2, which hides the opportunity to cancel the multiplication and division.",
            4: "Correct! E-graphs can store structurally similar expressions very compactly, representing exponentially many expressions in a small space.",
            5: "Correct! The two core operations are 'add' (adds e-nodes) and 'union' (merges e-classes).",
            6: "Correct! E-graph rewriting is only additive - it never forgets old versions of terms, unlike traditional destructive rewriting.",
            7: "Correct! Cycles mean the e-graph represents an infinite set of terms, like a, a × 1, a × 1 × 1, etc.",
            8: "Correct! Searching for pattern l yields pairs of (c, σ) where c is the matching e-class and σ is the substitution."
        };

        function updateProgress() {
            const progress = ((currentQuestion - 1) / totalQuestions) * 100;
            document.getElementById('progressBar').style.width = progress + '%';
            document.getElementById('scoreDisplay').textContent = `Question ${currentQuestion} of ${totalQuestions} | Score: ${score}/${totalQuestions}`;
        }

        function showQuestion(num) {
            document.querySelectorAll('.question').forEach(q => q.classList.remove('active'));
            document.getElementById(`q${num}`).classList.add('active');

            document.getElementById('prevBtn').disabled = num === 1;
            document.getElementById('nextBtn').disabled = !answered;
            document.getElementById('checkBtn').style.display = answered ? 'none' : 'inline-block';

            updateProgress();
        }

        function checkAnswer() {
            const questionId = currentQuestion;
            let userAnswer;
            let correct = false;

            if (questionId === 3) {
                userAnswer = document.getElementById('q3-input').value.toLowerCase().trim();
                correct = userAnswer.includes('a * 2') && userAnswer.includes('<<') ||
                    userAnswer.includes('shift') || userAnswer.includes('wrong turn');
            } else if (questionId === 7) {
                userAnswer = document.getElementById('q7-input').value.toLowerCase().trim();
                correct = userAnswer.includes('infinite') || userAnswer.includes('cycle') ||
                    userAnswer.includes('endless') || userAnswer.includes('repeated');
            } else {
                const selected = document.querySelector(`input[name="q${questionId}"]:checked`);
                if (!selected) return;
                userAnswer = selected.value;
                correct = userAnswer === answers[questionId];
            }

            const feedback = document.getElementById(`f${questionId}`);
            feedback.style.display = 'block';

            if (correct) {
                score++;
                feedback.className = 'feedback correct';
                feedback.textContent = '✓ ' + explanations[questionId];
            } else {
                feedback.className = 'feedback incorrect';
                feedback.textContent = '✗ ' + getIncorrectFeedback(questionId);
            }

            answered = true;
            document.getElementById('checkBtn').style.display = 'none';
            document.getElementById('nextBtn').disabled = false;

            updateProgress();
        }

        function getIncorrectFeedback(qId) {
            const incorrectFeedback = {
                1: "Incorrect. The main issue is that rewriting is destructive - you lose the original term and must commit to one path.",
                2: "Incorrect. An e-graph consists of e-classes (equivalence classes) and e-nodes (operators with e-class children).",
                3: "Incorrect. The greedy approach would rewrite a * 2 to a << 1, missing the opportunity to cancel with the division.",
                4: "Incorrect. E-graphs are efficient because they can store many structurally similar expressions compactly.",
                5: "Incorrect. The two core operations are 'add' (adds e-nodes) and 'union' (merges e-classes).",
                6: "Incorrect. E-graph rewriting is NOT destructive - it's additive and preserves all previous terms.",
                7: "Incorrect. Cycles represent infinite sets of equivalent terms, like a, a × 1, a × 1 × 1, etc.",
                8: "Incorrect. Searching yields pairs of (c, σ) where c is the matching e-class and σ is the substitution."
            };
            return incorrectFeedback[qId];
        }

        function nextQuestion() {
            if (currentQuestion < totalQuestions) {
                currentQuestion++;
                answered = false;
                showQuestion(currentQuestion);
            } else {
                showFinalScore();
            }
        }

        function previousQuestion() {
            if (currentQuestion > 1) {
                currentQuestion--;
                answered = true; // Previous questions are already answered
                showQuestion(currentQuestion);
            }
        }

        function showFinalScore() {
            document.querySelector('.quiz-container').style.display = 'none';
            document.getElementById('finalScore').style.display = 'block';

            const percentage = Math.round((score / totalQuestions) * 100);
            let message;

            if (percentage >= 90) {
                message = `Outstanding! You scored ${score}/${totalQuestions} (${percentage}%). You've mastered e-graphs and equality saturation! 🎓`;
            } else if (percentage >= 70) {
                message = `Great job! You scored ${score}/${totalQuestions} (${percentage}%). You have a solid understanding of the concepts. 👍`;
            } else if (percentage >= 50) {
                message = `Good effort! You scored ${score}/${totalQuestions} (${percentage}%). Review the material and try again to improve. 📚`;
            } else {
                message = `You scored ${score}/${totalQuestions} (${percentage}%). Don't worry - these are complex concepts. Review the material and try again! 💪`;
            }

            document.getElementById('finalScoreText').textContent = message;
        }

        function restartQuiz() {
            currentQuestion = 1;
            score = 0;
            answered = false;

            // Reset all inputs
            document.querySelectorAll('input[type="radio"]').forEach(input => input.checked = false);
            document.querySelectorAll('input[type="text"]').forEach(input => input.value = '');
            document.querySelectorAll('.feedback').forEach(feedback => feedback.style.display = 'none');

            document.querySelector('.quiz-container').style.display = 'block';
            document.getElementById('finalScore').style.display = 'none';

            showQuestion(1);
        }

        // Initialize
        updateProgress();
    </script>
</body>

</html>